<script lang="ts" setup>
import { ref, watch, onMounted, toRefs } from "vue"
import "vditor/dist/index.css"
import Vditor from 'vditor/dist/method.min'


const props = withDefaults(defineProps<{ value?: string, options?: any }>(), { value: "", options: {} })
const { value } = toRefs(props)
const { options } = props;
const ih = ref("")
// const sourceRef = ref();
const targetRef = ref();
const OPS = {
    engine: "MathJax",
    math: {
        inline: [],
        block: ["\\[", "\\]"],
        // inlineDigit: true,
        engine: "MathJax",
        delimiters: [
                { left: "$$", right: "$$", display: true },
                { left: "\\(", right: "\\)", display: false },
                { left: "\\begin{equation}", right: "\\end{equation}", display: true },
                { left: "\\begin{align}", right: "\\end{align}", display: true },
                { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
                { left: "\\begin{gather}", right: "\\end{gather}", display: true },
                { left: "\\begin{CD}", right: "\\end{CD}", display: true },
                { left: "\\[", right: "\\]", display: true }
            ],
        macros: {
            inlineMath: [['(', ')']],
            displayMath: [["[", "]"], ["\[", "\]"], ["\\[", "\\]"]],
            delimiters: [
                { left: "$$", right: "$$", display: true },
                { left: "\\(", right: "\\)", display: false },
                { left: "\\begin{equation}", right: "\\end{equation}", display: true },
                { left: "\\begin{align}", right: "\\end{align}", display: true },
                { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
                { left: "\\begin{gather}", right: "\\end{gather}", display: true },
                { left: "\\begin{CD}", right: "\\end{CD}", display: true },
                { left: "\\[", right: "\\]", display: true }
            ]
            // equationNumbers: { autoNumber: 'AMS' },
        },
        mathJaxOptions: {
                    options: {
                        // 隐藏右键菜单
                        enableMenu: false,
                    },
                    startup: {
                        typeset: true,
                    },
                    // 配置解析式定位符
                    tex: {
                        // inlineMath: [ ["$", "$"],['(', ')']],
                        displayMath: [ ["$$", "$$"],["[", "]"],["\[","\]"],["\\[","\\]"]],
                        // equationNumbers: { autoNumber: 'AMS' },
                    },
                    svg: {
                        fontCache: 'global'
                    },
                }
    },
    // preview: {
    //     markdown: {
    //         autoSpace: true,
    //         fixTermTypo: true,
    //     },
    //     math: {
    //         inlineDigit: true,
    //         engine: "MathJax",
    //         macros: {
    //             inlineMath: [['$', '$'], ['\\(', '\\)']],
    //             displayMath: [['$$', '$$'], ["\\[", "\\]"]],
    //             equationNumbers: { autoNumber: 'AMS' },
    //             mathJaxOptions: {
    //                 options: {
    //                     // 隐藏右键菜单
    //                     enableMenu: false,
    //                 },
    //                 startup: {
    //                     typeset: true,
    //                 },
    //                 // 配置解析式定位符
    //                 tex: {
    //                     inlineMath: [['$', '$'], ['\\(', '\\)']],
    //                     displayMath: [['$$', '$$'], ["\\[", "\\]"]],
    //                     equationNumbers: { autoNumber: 'AMS' },
    //                 },
    //                 svg: {
    //                     fontCache: 'global'
    //                 },
    //             }

    //         }
    //     }
    // },
    mode: "light",
    cdn: "/vditor-cdn",
    theme: {
        current: "light"
    }
}

watch(value, (v: string) => {
    // console.log('.......',v)
    Vditor.preview(targetRef.value, v, {mode: "light",cdn: "/vditor-cdn"})
})

// console.log('====> ', value.value)
//
onMounted(async () => {
    // console.log(Vditor.md2html(value.value, OPS))
    Vditor.preview(targetRef.value, value.value, OPS)
})
</script>


<template>
    <div class="w-full h-full">
        <div ref="targetRef" style="color:inherit;font-size:inherit;"></div>
    </div>
</template>